課程目的:

這次的內容是利用navigator.geolocation API去追蹤用戶的定位，並回傳地理位置、速率等等…

作品實做

本次功能實作重點：

• 選取DOM元素
• 取得地理位置渲染在網頁上

選取DOM元素

 const arrow = document.querySelector(".arrow"); //控制指針方位
 const speed = document.querySelector(".speed-value"); //速度

取得地理位置渲染在網頁上

   navigator.geolocation.watchPosition(
        (data) => {
          console.log(data);
          speed.textContent = data.coords.speed; //將當前裝置移動的速度渲染speed
          arrow.style.transform = `rotate(${data.coords.heading}deg)`; 
          //將當前裝置方位渲染arrow
        },
        (err) => {
          console.error(err);
        }//當未取得定位授權時顯示error
      );

watchPosition() 允许APP持續追蹤用戶，並在發生位置變化時更新。換句話說：當用戶的設備位置（如GPS座標）發生變化時，一個已經設置好handler function會被自動觸發或執行。
而get到的資料Position.coords (這裡命名為data)為當前位置的Coordinates 物件，包括裝置在地球上的二維位置，以及海拔高度和速度。

導讀文件以及學習資源

JS30
freecodecamp